<script setup lang="ts">
import { ref } from "vue";
import { message } from "@/utils/message";
import ModifyModal from "./PreferencesPassword.vue";

type List = {
  key: string;
  title: string;
  illustrate: string;
};

const list = ref<List[]>([
  {
    key: "password",
    title: "账户密码",
    illustrate: "当前密码强度：强"
  },
  {
    key: "phone",
    title: "密保手机",
    illustrate: "已经绑定手机：137****0000"
  },
  {
    key: "qa",
    title: "密保问题",
    illustrate: "未设置密保问题，密保问题可有效保护账户安全"
  },
  {
    key: "email",
    title: "备用邮箱",
    illustrate: "已绑定邮箱：vas***@163.com"
  }
]);

const modifyModalRef = ref();

// 点击
const onClick = (item: List) => {
  if (item.key === "password") {
    modifyModalRef.value.handleOpen();
  } else {
    message("请根据具体业务自行实现", { type: "success" });
  }
};

// 重载
const reload = () => {
  //
};
</script>

<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      <div class="flex items-center">
        <div class="flex-1">
          <p>{{ item.title }}</p>
          <el-text class="mx-1" type="info">{{ item.illustrate }}</el-text>
        </div>
        <el-button
          type="primary"
          plain
          :title="item.key !== 'password' ? '请根据具体业务自行实现' : ''"
          :disabled="item.key !== 'password'"
          @click="onClick(item)"
        >
          修改
        </el-button>
      </div>
      <el-divider />
    </div>
    <ModifyModal ref="modifyModalRef" @ok="reload" />
  </div>
</template>

<style lang="scss" scoped>
.el-divider--horizontal {
  border-top: 0.1px var(--el-border-color) var(--el-border-style);
}
</style>
